<template>
  <!-- 团长审核 -->
  <div class="check">
    <h3>团长审核</h3>
    <div class="teamInner">
      <div class="fromInput">
        <div class="block">
          <span class="demonstration">时间范围：</span>
          <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </div>
        <p>
          审核状态:
          <el-select v-model="value" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </p>
        <div class="inp">
          <span>关键词:</span>
          <el-input v-model="input" placeholder="请输入"></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </div>

      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="ID" type="index" width="50"></el-table-column>

          <el-table-column label="头像" width="130">
            <template slot-scope="scope">
              <span>
                <img :src="scope.row.img" alt />
              </span>
            </template>
          </el-table-column>

          <el-table-column label="姓名" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="手机号" width="130">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.tel }}</span>
            </template>
          </el-table-column>

          <el-table-column label="所属城市" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.city }}</span>
            </template>
          </el-table-column>

          <el-table-column label="自提点信息" width="280">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.text }}</span>
            </template>
          </el-table-column>

          <el-table-column label="团长配送费" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.peifei }}</span>
            </template>
          </el-table-column>

          <el-table-column label="审核人姓名" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.shenname }}</span>
            </template>
          </el-table-column>

          <el-table-column label="申请时间" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.shengtime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="审核时间" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.hetime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.lls }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="状态" width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                :active-value="1"
                inactive-color="#ff4949"
                @change="onChange($event, scope.row.lls)"
              ></el-switch>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="142">
            <template>
              <el-button type="text" size="small">通过</el-button>
              <el-button type="text" size="small">不通过</el-button>
              <!-- <el-button type="text" size="small">绑定核销员</el-button>
              <el-button type="text" size="small">查看核销员</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      value3: "",
      tableData: [],
      input: "",
      value: "",
      options: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "审核中",
          label: "审核中"
        },
        {
          value: "审核失败",
          label: "审核失败"
        }
      ]
    };
  },
  created() {
    this.getAddress();
  },
  methods: {
    // 获取数据
    async getAddress() {
      let res = await this.$http.get("/colonelaudit");
      console.log(res);
      this.tableData = res.data.data;
    },
    // 搜索
    search() {
      this.$http.get(`/colonelauditsou/?name=${this.input}`).then(res => {
        console.log(res);
        this.tableData = res.data.data;
        this.$message.success(res.data.msg);
      });
    }
  }
};
</script>

<style scoped lang='scss'>
.check {
  width: 100%;
  height: 100%;
  .teamInner {
    width: 100%;
    .fromInput {
      display: flex;
      padding: 15px 0;
      .block {
        padding-right: 50px;
      }
      p {
        padding-right: 50px;
        input {
          width: 250px;
          height: 40px;
          text-indent: 10px;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
.inp {
  display: flex;
  align-items: center;
  padding-left: 30px;
  .el-input {
    width: 300px;
    padding-right: 20px;
  }
  span {
    padding-right: 10px;
  }
}
img {
  width: 90px;
  height: 45px;
}
</style>
